<template>
  <div>
    <div class="header">
      <van-icon class="arrow-left" name="arrow-left" @click="goBack" />
      <span>草稿箱</span>
      <!-- <van-icon
        class="ellipsis"
        name="ellipsis"
        v-show="flagE"
        @click="ellipsisShow"
      /> -->
    </div>
    <div class="draftsShow">
      <!-- <div class="draftsList" v-for="(item, index) in draftsList" :key="index">
        {{ item.text }} -->
      <!-- </div> -->
      <!-- 显示草稿信息 -->
      <van-checkbox-group v-model="result">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in draftsList"
            :key="index"
            clickable
            :title="item.text"
            title-style="font-size:28px; margin-bottom:24px;  width:100px;overflow:hidden"
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox :name="item" ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <div class="footer">
        <span class="f-left">已选中 {{ result.length }} 条内容</span>
        <span class="f-right" @click="delMore(result)">删除</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // flagE: true,
      draftsList: [
        {
          text: "1111111111111122222222222222222",
        },
        {
          text: "222",
        },
        {
          text: "333",
        },
        {
          text: "444",
        },
        {
          text: "555",
        },
        {
          text: "666",
        },
      ],
      result: [],
    };
  },
  methods: {
    // 返回
    goBack() {
      this.$router.back();
    },
    // 右上角的三个点
    // ellipsisShow() {
    //   this.flagE = !this.flagE;
    // },
    // 每条草稿的点击事件
    toggle(index) {
      //   this.result.push(this.draftsList[index]);
      this.$refs.checkboxes[index].toggle();
    },
    // 草稿多条删除
    delMore(result) {
      // 需要调用草稿批量删除接口
      console.log(result);
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  text-align: center;
  margin-top: 36px;
  margin-bottom: 70px;
  .arrow-left {
    position: absolute;
    left: 0px;
    font-size: 48px;
  }
  span {
    font-size: 40px;
  }
  .ellipsis {
    position: absolute;
    right: 0px;
    font-size: 40px;
  }
}
.draftsShow {
  width: 574px;
  margin-left: 88px;
  .draftsList {
    margin-left: 10%;
    margin-bottom: 20px;
    width: 80%;
    height: 50px;
    font-size: 28px;
    background-color: aqua;
    color: black;
  }
}
.footer {
  position: absolute;
  font-size: 30px;
  bottom: 10px;
  width: 574px;
  .f-left {
    float: left;
  }
  .f-right {
    width: 140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    float: right;
    border: solid 1px #888;
  }
}
</style>
